// 弹窗的组件
/**
 * 参数 ====== 说明 ====== 类型 ====== 默认值
 * show        是否显示    Boolean     false
 * title       弹出框标题  sting       失败
 * msg         弹出框信息  sting       未知信息
 * close       关闭后的回调  Function  空方法
 */
Vue.component('de-alert', {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            required: true,
            default: '失败',
        },
        msg: {
            type: String,
            required: true,
            default: '未知信息',
        },
        close: {
            type: Function,
            default: function (){},
        }
    },
    methods: {
        pop_close: function (){
            // 是回调函数则执行
            if (typeof(this.close) == 'function') {
                this.close();
            }
        }
    },
    template: `<div class="de_backdrop" v-show="show == true">
            <div class="de_popup">
                <div class="pop_box">
                    <label>{{title}}</label>
                    <div>{{msg}}</div>
                </div>
                <div class="pop_button" @click="pop_close">确定</div>
            </div>
        </div>`,
});


// 底部导航栏组件
/**
 * 参数 ====== 说明 ====== 类型 ====== 默认值
 */
Vue.component('de-bar', {
    template: `<div class="de_bar">
            <a href="../shop/index.html">
                <div>
                    <img src="../mui/svg/home.svg">
                </div>
                <span>首页</span>
            </a>
            <a href="../shop/cart.html">
                <div>
                    <img src="../mui/svg/cart.svg">
                </div>
                <span>购物车</span>
            </a>
            <a href="../home/index.html">
                <div>
                    <img src="../mui/svg/user.svg">
                </div>
                <span>我的</span>
            </a>
        </div>`,
});